목차
팀원소개
작업내용
코드분석
기능시연
팀원소개
김나영 장화현 정주은
송영진 오원석 김성경 김세연
팀장
비선실세
일정관리
벤치마킹
작업내용 -개요
구분 구현 기능 사용 기능
공통
UI Tiles, 공통빈
회원가입 js, ajax, JQuery
로그인 js, ajax, JQuery
정답률 표시 (차트) c3, JQuery
문제 풀기 / 채점결과 보기 ResultMap, ajax
강사 문제 업로드 / 수정 / 삭제 ResultMap, AOP
작업내용 -간단소개
작업내용 -간단소개
작업내용 -유스케이스
작업내용 DB 설계
코드분석 : UI (tiles / 공통빈 적용)
1. 환경설정
web.xml ___________________________________________________________________________________________
공통빈 설정
DispatcherServlet 설정
코드분석 : UI (tiles / 공통빈 적용)
2. tiles 설정
kosmo-web.xml ___________________________________________________________________________________________
tiles-definitions.xml ___________________________________________________________________________________________
tiles 설정내용이 들어있는 xml 파일
tiles 사용할 jsp파일들 설정
tiles 적용할 jsp파일의 경로 설정
{1} / {2} 우선순위를 의미
코드분석 : 로그인
코드분석 : 로그인
코드분석 : 로그인
코드분석 : 로그인
코드분석 : 회원가입
이름 성과 이름을 받아와 합쳐주는 작업
/객관식 문제등록 : UI
과목명, 문제유형을 라디오버튼으로 생성
문제유형에 따라
양식이 변경되도록 처리
정답을 hidden 으로 숨겨두고,
객관식의 경우,
라디오버튼의 value값에 따라 보기의 값을 가져와
정답에 넣어주고,
주관식의 경우,
정답란에 입력한 내용을
정답에 넣어
/객관식 문제등록 : 등록양식 변경
양식 구분되는 부분을 각각 <div>나눈 ,
style="display: none" 두고,
라디오버튼에 onclick 으로 function 걸어준다.
/객관식 문제등록 : 정답 복사
객관식 문제의 경우,
라디오버튼에 체크된 번호를 가져와
해당 번호의 보기의 text
Hidden 으로 숨겨진 정답란에 복사하는 function
- switch/case문을 사용
/객관식 문제등록 : 데이터 저장
Form 담아서 데이터를 넘길 ,
Onsubmit="return 함수()" 걸어주면,
Submit버튼이 작동하기 전에
해당함수를 먼저 실행 , true 반환되면 동작함.
미입력값이 있는 경우,
Alert 으로 경고창 실행하고,
Confirm 으로 확인창 실행하여
진행의사확인
/객관식 문제등록 : 데이터 저장
Controller
Dao
Mapper
VO객체를 받아야 하기 때문에
POST방식 사용
Service 단을 거쳐서 dao
메서드 호출하여 VO 넣어준다.
처리 , 입력폼으로 redirect 이동
/객관식 문제 수정/삭제 : UI
로그인 , 회원번호를 sessionUsernum 변수로
저장해 두고,
본인이 등록한 문제리스트를 호출
ForEach 문으로 리스트 출력하면서
수정, 삭제 버튼에 해당 문제번호 부여
수정버튼 클릭 , 수정페이지로 이동
삭제버튼 클릭 , 바로 삭제
과목별로 10문제 세트가 완성되어
회차가 업데이트된 문제의 경우,
문제수정 삭제 리스트에서 제외
/객관식 문제 수정/삭제 : UI
삭제 버튼에 문제번호를 인자로 받는 function
Controller 문제번호를 파라미터로 담아서 넘깁니다.
Java script
Controller 파라미터는 String 으로 넘어오기 때문에
인자가 int 라면 자료형을 바꿔서 받아 사용해 줍니다.
돌아갈 페이지가 사용자가 등록한 문제리스트 이므로,
Session 저장해둔 sessionUsernum 받아
파라미터로 사용합니다.
/객관식 문제 수정 : 등록양식 변경
문제 등록폼과 마찬가지로 문제타입 정보에 따라서
양식이 변경되도록 설정
window.onload = function()
걸어주면 페이지 dom객체 생성
자동 실행됨
보기1값이 null 아니면, 객관식
null이면 주관식 으로 구분하여
Map 저장하여
문제번호로 가져온 문제의 항목별 정보와 함께
페이지에 전달
/객관식 문제 수정 : 데이터 저장
로직은 기본적으로
문제등록과 동일
Dao , Mapper 에서
Insert 대신 update사용
코드분석 : 문제입력
문제등록
코드분석 : 문제 등록 (/객관식 처리 - Ajax사용)
SelectBox 선택값이 객관식인지 주관식인지 구별
선택값에 따라 받아온 Data
target 자식태그(children()) 삭제(remove())
서버에서 받아온 데이터로 새로 작성(html(data))
한다
코드분석 : 회차 업데이트(1회차->2회차)
회차업데이트 결과 표시 - .jsp , controller
회차에 30문제가 들어가면 2회차로 회차가 업데이트 되고,다음으로 들어가는
문제들은 1회차에 문제가 들어갑니다.
코드분석 : 회차 업데이트
회차업데이트 결과 표시 - AOP, mapper
문제입력하기 회차 문제갯수를 파악하고 문제를 입력합니다.
코드분석 : 문제 등록시 회차 자동업데이트 트리거
회차 자동업데이트 코드
트리거 내에서 팔요한 data
임시저장소에 저장
트리거 내에서 필요한
data 찾는 과정
회차번호가 없을 회차번호를 새로 등록
이미 생성된 회차번호가 있을 자기과목의
마지막회차번호에서 다음회차로 업데이트
코드분석 : 임시문제게시판
임시게시판에서 수정 삭제 가능
코드분석 : 한문제 풀기 Mapper
문제번호를 기준으로
문제의 디테일을 가져옴
반환타입은 문제의 정보를 담는 VO
문제, 보기 1~4, 정답을 가져옴
모든 정보를 가져옴
디테일을 위한 Mapper
정답 채점을 위한 Mapper
코드분석 : 한문제 풀기
문제번호를 파라미터로
받음
문제번호를 기준으로
해당 문제의 디테일을
가져와서 전송
DB 등록될 유저번호를
세션으로 사용
(로그인 중인 유저가
누구인지 확인)
유저의 기록에 따라
풀어본 문제인지 확인
코드분석 : 한문제 풀기 /객관식 처리 - Ajax사용
DB기록 유무에 따라서 메시지를 다르게 출력
코드분석 : 한문제 풀기
Controller에서 가져온 dlist 여러가지 디테일을 뽑기가 가능
과목번호를 기준으로 자신이 푸는 문제가 무슨 문제인지 파악 가능
코드분석 : 한문제 풀기
자신이 푸는 문제의 과목을 확인 가능
선택한 문제의 문제와 보기를 확인 가능
라디오 버튼으로 정답을 선택
Required 선언으로 같은 아이디의 라디오 버튼이
반드시 선택 되도록 설정
코드분석 : 한문제 풀기
Hidden으로 문제번호를 넘기면서
chkProcessPOST방식으로 이동
같은 문제번호를 받기 때문에 해당 페이지 새로고침
과목번호에 따라
과목별로 리스트 따로 출력
코드분석 : 한문제 풀기
문제번호를 기준으로
해당 문제의 정답과
회차를 조회
시험 결과 테이블에
INSERT 정보들을
VO 저장
자신이 입력한 답이
정답인지 아닌지 비교해서
시험결과 테이블에 INSERT
코드분석 : 한문제 풀기 결과 등록
문제를 유저의 유저번호 문제의 문제번호 문제가 정답인지 아닌지 문제의 회차 번호
설정한 VO 저장
코드분석 : 1회차 문제 풀이 (30문제)
1. 회차 목록을 표시 view 사용
코드분석 : 1회차 문제 풀이 (30문제)
2. 30문제 표시 resultMap 사용
Controller_____________________________________________________________________
Mapper _____________________________________________________________________
코드분석 : 1회차 문제 풀이 (30문제)
3. 30문제 답을 전달 Jquery, ajax 사용
답이 30 존재하므로 30 답을 담는 배열을 선언
라디오버튼의 체크된 값을 30 받아온다
배열의 인덱스에 넣는다
데이터를 컨트롤러로 넘긴다.
배열을 ajax 넘길 필요한 옵션 traditional
코드분석 : 1회차 문제 풀이 (30문제)
4. 30문제 답을 전달 (1) Controller ( 자동 채점 / 정답 여부 / 정답률 계산)
채점 데이터 인풋 로직은 1문제와 동일하다
리스트의 인덱스로 값을 뽑아온다
코드분석 : 1회차 문제 풀이 (30문제)
4. 30문제 답을 전달 (2) Mapper (자동채점 / 결과, 정답률을 DB넣기)
결과를 DB업데이트 정답률 계산 (함수 사용)
코드분석 : 1회차 문제 풀이 (30문제)
5. 문제 풀이 결과 표시 - Controller
코드분석 : 차트 (Bar, Line, Donut)
차트 생성시 사전 준비 주의사항
C3.css 적용되지
않으면 발생하는 오류
코드분석 : 차트 (Bar, Line, Donut)
Bar 차트
Bar or Line 차트에 적합한 JSON 형태
차트에 출력할 데이터 DB -> List 저장
JsonArrayadd : 차트 출력시 Value
JsonObject (“key” , value) 로 저장
X 카테고리로 문제번호 입력
차트에 출력할 데이터
코드분석 : 차트 (Bar, Line, Donut)
Bar 차트
코드분석 : 차트 (Bar, Line, Donut)
Line 차트
Bar or Line 차트에 적합한 JSON 형태
차트에 출력할 데이터 DB -> List 저장
차트 출력시 Value
JsonObject (“key” , value) 로 저장
X 카테고리로 회차번호 입력
차트에 출력할 데이터
코드분석 : 차트 (Bar, Line, Donut)
Line 차트
코드분석 : 차트 (Bar, Line, Donut)
Donut 차트
차트에 출력할 데이터
Donut 모양 차트에 적합한 JSON 형태
필요데이터 추출
Map “key” : value로 저장
map문자열 json object
값으로 변경 시켜주는 역할
코드분석 : 차트 (Bar, Line, Donut)
Donut 차트
System.out.println("고생많으셨습니다🤗 ");